<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
	#div1 { width:510px; height:510px; background:#f1f1f1; position:relative; }




    </style>
</head>
<body>

<div id="div1"></div>

<script type="text/javascript">
	
	fn1('div1', 100, 10, '20111121182246834.jpg', 'onmouseover');

function fn1(id, len, n, url, evt) {
	var oDiv = document.getElementById(id);
	var aDiv = oDiv.getElementsByTagName('div');
	var str = '';
	for (var i = 0; i < len; i++) {
		str += '<div style="width:50px; height:50px; background:url(' + url + ') no-repeat ' + -i % n * 51 + 'px ' + -Math.floor(i / n) * 51 + 'px;  position:absolute; top:' + Math.floor(i / n) * 51 + 'px; left:' + i % n * 51 + 'px; filter:alpha(opacity:0); opacity:0;"></div>'
	}
	oDiv.innerHTML = str;
	for (var i = 0; i < len; i++) {
		aDiv[i][evt] = function() {
			this.style.filter = 'alpha(opacity:100)';
			this.style.opacity = 1
		}
	}
}
</script>
</body>
</html>